<script setup>
import HomePannel from './HomePannel.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
defineProps({
  campusList: {
    type: Array,
    default: () => []
  }
})

const showCampusMore = ref(false)
const showMoreHandle = () => {
  if (!showCampusMore.value) {
    showCampusMore.value = true
  } else {
    router.push('/campusOrShop/1')
  }
}
</script>
<template>
  <HomePannel title="校园圈" subTitle="校内车源  当面交易  购买更放心">
    <ul class="cars-list">
      <li v-for="item in campusList.slice(0, 6)" :key="item.id">
        <RouterLink :to="`/list?campusOrShopId=${item.id}`">
          <div
            class="img-area"
            :style="{ backgroundImage: `url(${item.picture})` }"
          ></div>
          <p class="name">{{ item.name }}</p>
        </RouterLink>
      </li>
    </ul>
    <div class="more" :class="{ active: showCampusMore }">
      <ul v-if="campusList.slice(6).length > 0" class="cars-list">
        <li v-for="item in campusList.slice(6)" :key="item.id">
          <RouterLink :to="`/list?campusOrShopId=${item.id}`">
            <div
              class="img-area"
              :style="{ backgroundImage: `url(${item.picture})` }"
            ></div>
            <p class="name">{{ item.name }}</p>
          </RouterLink>
        </li>
      </ul>
      <el-empty
        v-else
        image="src/assets/images/empty.png"
        description="暂无更多"
      />
    </div>

    <div class="panel-more">
      <a @click.prevent="showMoreHandle" class="btn" href="javascript:;"
        >{{ showCampusMore ? '查看全部' : '查看更多' }}
        <el-icon v-if="showCampusMore" class="icon"
          ><i-ep-ArrowRight
        /></el-icon>
        <el-icon v-else class="icon"><i-ep-ArrowDown /></el-icon>
      </a>
    </div>
  </HomePannel>
</template>
<style scoped lang="scss">
.more {
  height: 0;
  overflow: hidden;
  transition: all 0.3s ease-out;
  &.active {
    margin-bottom: 30px;
    height: 210px;
  }
}

.cars-list {
  display: flex;
  height: 210px;
  margin-bottom: 30px;
  padding: 0 30px;

  li {
    margin: 0 18px;
    transition: all 0.5s;

    background-color: #fff;
    border-radius: 10px;

    &:hover {
      transform: translate3d(0, -3px, 0);
      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
    }

    .img-area {
      width: 160px;
      height: 160px;

      background-position: center center;
      background-repeat: no-repeat;
      background-size: 90%;
    }

    p {
      font-size: 18px;
      padding-top: 8px;
      text-align: center;
    }
  }
}

.panel-more {
  text-align: center;

  .btn {
    display: inline-block;
    width: 200px;
    height: 45px;
    padding-left: 15px;

    line-height: 45px;
    font-size: 18px;
    color: $helpColor;
    border: 1px solid $helpColor;

    .icon {
      position: relative;
      top: 2px;
      left: 5px;
    }
  }
}
</style>
